<template>
  <view>
    <!-- 操作列表 -->
    <view class="settings-option-list">
      <view
        class="settings-option-list__inner"
        v-for="(item, index) in lists"
        :key="index"
        @tap="jumpTo(item.url)"
      >
        <text class="settings-text">{{ item.name }}</text>
        <text class="lg text-grey cuIcon-right"></text>
      </view>
    </view>

    <!-- 退出登陆 -->
    <view class="logout-btn" @tap="logOut">
      <text class="settings-text">退出登录</text>
    </view>
  </view>
</template>

<script>
	const Page = require('../../utils/mtj-wx-sdk.js').Page;
import { mapMutations, mapState,} from 'vuex'; 
export default {
  data() {
    return {
      lists: [
        // {
        //   name: "关于我们",
        //   url: "/pages/platformInformation/index"
        // },
        {
          name: "协议展示",
          url: "/pages/settingsPage/agreementDisplay"
        },
		{
		  name: "账户与安全",
		  url: "/pages/settingsPage/account"
		}
      ]
    };
  },
  methods: {
    ...mapMutations(['logout']),
    jumpTo(url) {
		console.log(url)
      uni.navigateTo({
        url: url
      });
    },
    logOut() {
      uni.showLoading({
        title: "加载中"
      });
      // setTimeout(() =>{
      // },1000)
        this.logout()
        uni.redirectTo({
          url: "/pages/login/index"
        });
        uni.hideLoading();
    }
  }
};
</script>

<style lang="scss" scoped>
.settings-text {
  font-size: 17px;
  font-weight: 400;
  color: #333333;
  line-height: 24px;
}

.settings-option-list {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  margin: 18px 0;
  .settings-option-list__inner {
    display: flex;
    justify-content: space-between;
    padding: 14px 16px 14px 0;
    margin-left: 16px;
    border: none;
    border-bottom: 1px solid #f5f5f5;
  }
  .settings-option-list__inner:last-child {
    border: none;
  }
}

.logout-btn {
  background-color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 14px 0;
}
</style>
